import { ref, onMounted, getCurrentInstance, watch } from 'vue'
import {getWorld3dInstance} from "../three/src/3d/scene/World3d.js";
import ColorPlatePopup from "./ColorPlatePopup.js";
import {ElPopover, ElInputNumber} from "../lib/element-plus@2.8.4/index.full.min.mjs";
import World3dEvent from "../three/src/3d/scene/event/World3dEvent.js";
import {OffsetEnum} from "../three/src/3d/model/RoutePointVO.js";

export default {
  components: {
    ColorPlatePopup, ElPopover, ElInputNumber
  },
  setup(props, ctx) {
    const world3d = getWorld3dInstance()
    const show = ref(false)
    const offsetPopupRef = ref()
    world3d.scene.addEventListener(World3dEvent.routeSelected.type, () => {
      show.value = true
      const routeVO = World3dEvent.routeSelected.value.vo
      areaColor.value = routeVO.getPaintColor()
      flightSpeed.value = routeVO.speed
      sprayDistance.value = routeVO.sprayDistance
      pointRadius.value = routeVO.getPointRadius()
    })
    world3d.scene.addEventListener(World3dEvent.clearPaneSelection.type, () => {
      show.value = false
      offsetPopupRef.value.hide()
    })
    const areaColor = ref('#f78920');
    const plateVisible = ref(false);
    const setPlateVisible = (val) => {
      plateVisible.value = val
    }
    const onColorSelected = (color) => {
      console.log('onColorSelected: ', color)
      world3d.store.setRouteColor(color)
    }
    const onClosed = () => {
      plateVisible.value = false
    }
    const sprayDistance = ref(2)
    const pointRadius = ref(0.5)
    const flightSpeed = ref(0.5)
    watch(sprayDistance, (newVal) => {
      world3d.store.setRouteSprayDistance(newVal);
    })
    watch(pointRadius, (newVal) => {
      world3d.store.setRouteAllPointRadius(newVal);
    })
    watch(flightSpeed, (newVal) => {
      world3d.store.setRouteSpeed(newVal);
    })
    return {
      world3d,
      plateVisible,
      setPlateVisible,
      onColorSelected,
      onClosed,
      sprayDistance,
      pointRadius,
      flightSpeed,
      show,
      areaColor,
      offsetPopupRef,
      OffsetEnum,
    }
  },
  template: `
  <div class="colors-pane-horizon" v-show="show">
    <div class="route-bar">
      <div class="bar-item bottom-border" @click="setPlateVisible(true)" title="Spray color">
        <img src="../assets/color.png"/>
      </div>
      <el-popover
        placement="left"
        trigger="click"
        effect="dark"
      >
        <template #reference>
          <div class="bar-item bottom-border" title="Spray distance">
            <img src="../assets/distance.png"/>
          </div>
        </template>
        <el-input-number
          v-model="sprayDistance"
          :min="1"
          :max="10"
          :step="0.1"
          size="small"
          controls-position="right"
        >
          <template #suffix>
            <span>m</span>
          </template>
        </el-input-number>
      </el-popover>
      <el-popover
        placement="left"
        trigger="click"
        effect="dark"
      >
        <template #reference>
          <div class="bar-item bottom-border" title="航点半径">
            <img src="../assets/radius.png"/>
          </div>
        </template>
        <el-input-number
          v-model="pointRadius"
          :min="0.1"
          :max="10"
          :step="0.1"
          size="small"
          controls-position="right"
        >
          <template #suffix>
            <span>m</span>
          </template>
        </el-input-number>
      </el-popover>
      
      <el-popover
        placement="left"
        trigger="click"
        effect="dark"
        ref="offsetPopupRef"
      >
        <template #reference>
          <div class="bar-item bottom-border" title="航点偏移类型">
            <img src="../assets/offset.png"/>
          </div>
        </template>
        <div class="edit-child" @click="offsetPopupRef.hide()">
          <div class="edit-child-item" @click="world3d.updateSingleRouteOffsetType(OffsetEnum.h)">Horizontal</div>
          <div class="edit-child-item" @click="world3d.updateSingleRouteOffsetType(OffsetEnum.up)">Vertical Up</div>
          <div class="edit-child-item" @click="world3d.updateSingleRouteOffsetType(OffsetEnum.down)">Vertical Down</div>
        </div>
      </el-popover>
      
      <el-popover
        placement="left"
        trigger="click"
        effect="dark"
      >
        <template #reference>
          <div class="bar-item bottom-border" title="Flight speed">
            <img src="../assets/speed.png"/>
          </div>
        </template>
        <el-input-number
          v-model="flightSpeed"
          :min="0.1"
          :max="10"
          :step="0.1"
          size="small"
          controls-position="right"
        >
          <template #suffix>
            <span>m/s</span>
          </template>
        </el-input-number>
      </el-popover>
      <div class="bar-item" @click="world3d.store.removePickingRoute()" title="删除航线">
        <img src="../assets/delete.png"/>
      </div>
    </div>
    <ColorPlatePopup
      class="mr8"
      :selectedColor="areaColor"
      :plateVisible="plateVisible"
      :setPlateVisible="setPlateVisible"
      :onColorSelected="onColorSelected"
      :onClosed="onClosed"
    />
  </div>
  
  `
}
